<template>
    <div>
        <a class="scrollup" @click="backTop">
            <i class="fa fa-angle-double-up"></i>
        </a>
        <header class="header">
            <div id="rt-sticky-placeholder"></div>
            <div id="header-menu" class="header-menu menu-layout2">
                <div class="container">
                    <div class="row d-flex align-items-center">
                        <div class="col-lg-2">
                            <div class="logo-area">
                                <a href="index.html" class="temp-logo">
                                    <img src="../../assets/images/logo-dark.png" alt="logo" class="img-fluid">
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-7 d-flex justify-content-end">
                            <nav id="dropdown" class="template-main-menu">
                                <ul>
                                    <li>
                                        <router-link to="/home">首页</router-link>
                                    </li>
                                    <li>
                                        <router-link to="/task">商品</router-link>
                                    </li>
                                    <li>
                                        <a href="contact.html">问答任务</a>
                                    </li>
                                    <li>
                                        <a href="contact.html">会员</a>
                                    </li>
                                    <li>
                                        <a href="contact.html">博客</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div class="col-lg-3 d-flex justify-content-end">
                            <div class="header-action-layout1">
                                <ul>
                                    <li v-if="!isLogin" class="header-login-icon">
                                        <a @click="showLogin" class="color-primary" data-toggle="tooltip"
                                           data-placement="top" title="登录/注册">
                                            <i class="fa fa-user"></i>
                                        </a>
                                    </li>
                                    <li v-if="isLogin" class="set_btn user-card-box">
                                        <router-link to="/user" class="user-card-item">
                                            <img width="40" height="40" :src="userInfo.info.icon!=undefined?userInfo.info.icon:'//img2.mukewang.com/5603623000018c4001000100-100-100.jpg'">
                                        </router-link>
                                        <!--用户信息显示-->
                                        <div class="g-user-card">
                                            <div class="card-inner">
                                                <div class="card-top clearfix">
                                                    <router-link to="/user" class="l">
                                                        <img :src="userInfo.info.icon!=undefined?userInfo.info.icon:'//img2.mukewang.com/5603623000018c4001000100-100-100.jpg'" :alt="userInfo.username">
                                                    </router-link>
                                                    <div class="card-top-right-box l">
                                                        <router-link to="/user">
                                                            <span class="name text-ellipsis">{{userInfo.info.username}}</span>
                                                        </router-link>
                                                        <div class="meta">
                                                            <a href="/u/index/experience">经验<b id="js-user-mp">{{userInfo.info.growth}}</b></a>
                                                            <a href="/u/index/credit">积分<b id="js-user-credit">{{userInfo.info.integration}}</b></a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="user-center-box">
                                                    <ul class="clearfix">
<!--                                                        <li class="l">-->
<!--                                                            <a href="https://www.imooc.com/u/index/allcourses" target="_blank">-->
<!--                                                                <span class="user-center-icon icon-tick"></span>我的课程-->
<!--                                                            </a>-->
<!--                                                        </li>-->
                                                        <li class="l">
                                                            <a href="//order.imooc.com/myorder" target="_blank">
                                                                <span class="user-center-icon icon-receipt"></span>订单中心
                                                            </a>
                                                        </li>
                                                        <li class="l">
                                                            <a href="/mall/index" target="_blank">
                                                                <span class="user-center-icon icon-score_shop"></span>积分商城
                                                            </a>
                                                        </li>
                                                        <li class="l">
                                                            <a href="/user/setbindsns" target="_blank">
                                                                <span class="user-center-icon icon-set"></span>个人设置
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="card-history">
                                                    <span class="history-item">
                                                        <span class="tit text-ellipsis">ElasticSearch入门 </span>
                                                        <span class="media-name text-ellipsis">2-3 插件安装</span>
                                                        <i class="icon-clock"></i>
                                                        <a href="//www.imooc.com/video/15765" class="continue" title="ElasticSearch入门2-3  插件安装">继续</a>
                                                    </span>
                                                </div>
                                                <div class="card-sets clearfix">
                                                    <a @click="_loginOut" class="l">安全退出</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="header-btn">
                                        <a @click="toTask" href="javascript:;" class="item-btn"><i class="fa fa-plus"></i>Post Your Ad</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    </div>
</template>
<script>
    import {toTask} from '../../api';
    import {mapState} from 'vuex'
    import request from "../../assets/js/request";
    import mylisting from "../../views/user/children/mylisting";
    import {setToken} from "../../assets/js/auth";

    export default {
        name: "headBox",
        components: {},
        data() {
            return {
                bthFlag: false,
                scrollTop: 0,
            };
        },
        computed: {
            ...mapState(['isLogin', 'userInfo'])
        },
        mounted() {
            window.addEventListener('scroll', this.scrollToTop);
        },
        destroyed() {
            window.removeEventListener('scroll', this.scrollToTop)
        },
        methods: {
            toTask,
            backTop() {
                const that = this;
                let timer = setInterval(() => {
                    let ispeed = Math.floor(-that.scrollTop / 5);
                    document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
                    if (that.scrollTop === 0) {
                        clearInterval(timer)
                    }
                }, 16)
            },
            scrollToTop() {
                const that = this;
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                that.scrollTop = scrollTop;
                if (that.scrollTop > 500) {
                    $('.scrollup').addClass('back-top');
                } else {
                    $('.scrollup').removeClass('back-top');
                }
                let stickyPlaceHolder = $("#rt-sticky-placeholder"),
                    menu = $("#header-menu"),
                    menuH = menu.outerHeight(),
                    topHeaderH = $('#header-topbar').outerHeight() || 0,
                    middleHeaderH = $('#header-middlebar').outerHeight() || 0,
                    targetScroll = topHeaderH + middleHeaderH;
                if (that.scrollTop > targetScroll) {
                    menu.addClass('rt-sticky');
                    stickyPlaceHolder.height(menuH);
                } else {
                    menu.removeClass('rt-sticky');
                    stickyPlaceHolder.height(0);
                }
            },
            showLogin() {
                this.$emit("closeLoginBox", true)
            },
            _loginOut() {
                this.$store.dispatch('LogOut').then(() => {
                    location.reload() // 为了重新实例化vue-router对象 避免bug
                })
            }
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .user-card-box {
        position: relative
    }

    .user-card-box .g-user-card {
        visibility: hidden;
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 1000;
        width: 306px;
        padding: 24px;
        background-color: #fff;
        box-shadow: 0 8px 16px 0 rgba(7,17,27,0.2);
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        box-sizing: border-box
    }

    .user-card-box .g-user-card .card-top {
        color: #93999f;
        position: relative
    }

    .user-card-box .g-user-card .card-top a {
        display: inline-block;
        color: #93999f
    }

    .user-card-box .g-user-card .card-top a img {
        float: left;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        border: 2px solid #fff;
        margin-right: 12px
    }

    .user-card-box .g-user-card .card-top .card-top-right-box {
        margin-top: 14px
    }

    .user-card-box .g-user-card .card-top .name {
        display: inline-block;
        font-size: 16px;
        color: #07111b;
        width: 170px;
        line-height: 20px
    }

    .user-card-box .g-user-card .card-top .meta {
        margin-top: 4px;
        font-size: 12px;
        line-height: 12px
    }

    .user-card-box .g-user-card .card-top .meta a {
        margin-right: 12px
    }

    .user-card-box .g-user-card .card-top .meta b {
        margin-left: 2px
    }

    .user-card-box .g-user-card .user-center-box {
        margin-top: 16px;
        margin-bottom: 14px
    }

    .user-card-box .g-user-card .user-center-box ul li {
        position: relative;
        width: 128px;
        width: 127px\9;
        background: #F8FAFC;
        border-radius: 2px;
        color: #4d555d;
        margin: 0 2px 2px 0
    }

    .user-card-box .g-user-card .user-center-box ul li .user-center-icon {
        position: relative;
        top: 3px;
        font-size: 16px;
        margin-right: 8px
    }

    .user-card-box .g-user-card .user-center-box ul li a {
        width: 100%;
        height: 36px;
        line-height: 36px;
        padding-left: 12px;
        text-align: left;
        box-sizing: border-box;
        color: #1c1f21;
    }

    .user-card-box .g-user-card .user-center-box ul li:hover {
        background: #d9dde1
    }

    .user-card-box .g-user-card .user-center-box ul li:hover a {
        color: #4d555d
    }

    .user-card-box .g-user-card .user-center-box ul li i {
        width: 18px;
        height: 18px;
        position: absolute;
        top: 0;
        right: 8px;
        //background: url('/static/img/common/coupon-icon.png') no-repeat
    }

    .user-card-box .g-user-card .user-center-box ul li:nth-child(2n) {
        margin-right: 0
    }

    .user-card-box .g-user-card .card-history {
        padding-bottom: 16px;
        margin-bottom: -1px;
        border-bottom: 1px solid #edf1f2
    }

    .user-card-box .g-user-card .card-history .history-item {
        display: block;
        position: relative;
        padding-left: 24px;
        color: #787d82;
        transition: background-color .2s;
        line-height: 20px
    }

    .user-card-box .g-user-card .card-history .history-item .tit {
        display: block;
        margin-bottom: 8px;
        font-weight: bold
    }

    .user-card-box .g-user-card .card-history .history-item .media-name {
        display: block;
        width: 200px
    }

    .user-card-box .g-user-card .card-history .history-item .icon-clock,.user-card-box .g-user-card .card-history .history-item .imv2-history {
        position: absolute;
        left: 0;
        top: 2px;
        font-size: 16px;
        font-weight: 700
    }

    .user-card-box .g-user-card .card-history .history-item .continue {
        position: absolute;
        right: 0;
        top: 25px;
        color: #00b43c
    }

    .user-card-box .g-user-card .card-history .history-item .continue:hover {
        color: #00c850
    }

    .user-card-box .g-user-card .card-sets {
        margin-top: 16px;
        font-size: 12px;
        line-height: 12px
    }

    .user-card-box .g-user-card .card-sets a {
        color: #93999F
    }

    .user-card-box .g-user-card .card-sets a:hover {
        color: #4d555d;
        background: none
    }

    .user-card-box:hover .g-user-card {
        visibility: visible
    }
    .set_btn img {
        border-radius: 50%;
        vertical-align: middle;
        display: inline-block;
       // background: url(/static/img/menu_icon.png) no-repeat 0 0;
    }
    .user-card-box:hover .user-card-item img{
        border: 2px solid #f01414 !important;
    }
    .l {
        float: left;
    }
    [class*=" icon-"], [class^=icon-] {
        speak: none;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
</style>
